<template>
    <div style="height: 100%;">
        <div class="top">
            <div style="text-align:right;margin-top:20px;">
                <el-button @click="backHandler" class="back">返回</el-button>
            </div>
        </div>
        <h3>编辑采收计划信息</h3>
        <!-- <el-dialog v-model="visible" title="采收计划编辑"> -->
        <el-form v-model="visible" title="采收计划编辑">
            <el-form :model="formData" ref="form" :rules="rules">
                <el-form-item label="采收计划批次" :label-width="120" prop="pa">
                    <el-input v-model="formData.pa" />
                </el-form-item>
                <el-form-item label="计划采收时间" :label-width="120" prop="pb">
                    <el-date-picker v-model="formData.pb" type="date" placeholder="请选择日期" />
                </el-form-item>
                <el-form-item label="计划采收地块" :label-width="120" prop="pc">
                    <el-select v-model="formData.pc" placeholder="请选择块地">
                        <el-option label="1号块地" value="1号块地"></el-option>
                        <el-option label="2号块地" value="2号块地"></el-option>
                        <el-option label="3号块地" value="3号块地"></el-option>
                        <el-option label="4号块地" value="4号块地"></el-option>
                        <el-option label="5号块地" value="5号块地"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="采收作物" :label-width="120" prop="pd">
                    <el-select v-model="formData.pd" placeholder="请选择作物">
                        <el-option label="小麦" value="小麦"></el-option>
                        <el-option label="玉米" value="玉米"></el-option>
                        <el-option label="水稻" value="水稻"></el-option>
                        <el-option label="大豆" value="大豆"></el-option>
                        <el-option label="棉花" value="棉花"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="计划采收量" :label-width="120" prop="pe">
                    <el-input v-model="formData.pe" />
                </el-form-item>
                <el-form-item label="计划执行人" :label-width="120" prop="realname">
                    <el-input v-model="formData.realname" />
                </el-form-item>
            </el-form>
            <!-- <template #footer> -->
            <!-- <span class="dialog-footer"> -->
            <div class="btn">
                <el-button @click="resetHandler">重置</el-button>
                <el-button type="primary" @click="submitHandler"
                    style="background-color: #368B90!important;">确定</el-button>
            </div>
            <!-- </span> -->
            <!-- </template> -->
        </el-form>
        <!-- </el-dialog> -->
    </div>
</template>

<script lang='ts' setup>
import type { IUserTableItem0 } from '@/interfaces/IUser';
import { reactive } from 'vue';
const visible = defineModel({ required: true })
const props = defineProps<{ editRow: IUserTableItem0 | null }>()
import { watch } from 'vue';
import { inject } from 'vue';
import router from '@/router';
import { useNewOrdersStore } from '@/stores/NewOrdersStore';

import type { IOderPlans } from '@/stores/NewOrdersStore';
const newOrdersStore = useNewOrdersStore();
const rules = {
    pc: [{ required: true, message: '请选择采收地块', trigger: 'change' }],
    pd: [{ required: true, message: '请选择采收作物', trigger: 'change' }],
    realname: [
        { required: true, message: '请输入计划执行人', trigger: 'blur' },
        { pattern: /^[\u4e00-\u9fa5]{2,5}$/, message: '姓名必须为2-5个汉字', trigger: 'blur' }
    ],
    pb: [{ required: true, message: '请选择计划采收时间', trigger: 'change' }],
    pe: [
        { required: true, message: '请输入计划采收量', trigger: 'blur' },
        { pattern: /^\d{4}公斤$/, message: '格式必须为4位数字+公斤，如5478公斤', trigger: 'blur' }
    ],
    pa: [
        { required: true, message: '请输入采收计划批次', trigger: 'blur' },
        { pattern: /^201904\d{4}$/, message: '格式必须为2019040001，2019040002等', trigger: 'blur' }
    ],
};
const originFormData: IUserTableItem0 = {
    id: null,
    realname: '',
    pa: null,
    pb: '',
    pc: '',
    pd: '',
    pe: '',
}
const formData = reactive({ ...originFormData })

// 监听 editRow 变化，自动填充表单
watch(() => props.editRow, (val) => {
    if (val) {
        Object.assign(formData, val)
    }
}, { immediate: true })

const resetHandler = () => {
    Object.assign(formData, originFormData)
}
const emits = defineEmits(['update'])
const submitHandler = () => {
    if (typeof formData.pb !== 'string') {
        const date = formData.pb as Date;
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        formData.pb = `${year}.${month}.${day}`;
    }
    emits('update', { ...formData })
    visible.value = false
}
const currentView = inject('currentView');
const backHandler = () => {
    if (currentView && typeof currentView === 'object' && 'value' in currentView) {
        currentView.value = 'planlist';
        newOrdersStore.xs = true;
        router.push('/orders');
    }
}
</script>

<style lang='scss' scoped>
h3 {
    width: 200px;
    margin: 30px auto;
    color: white;
}

.el-form-item {
    width: 400px;

    margin: 30px 0 30px 400px;
}

.btn {
    width: 200px;
    // margin-left: 450px;
    margin: 20px auto;
}

.top {
    width: 100%;
    display: flex;
    justify-content: flex-end;

    .back {
        background-color: rgb(84, 84, 129);
        color: white;
        width: 85px;
        height: 40px;
    }
}

.el-button {
    background-color: #1E4D58 !important;
    color: white;
    border: 0;
}

::v-deep(.el-form-item__label) {
    color: white; // 你想要的颜色
}
</style>